<template>
    <a-button v-if="!authStore.isLogin" @click="showLoginModal" type="primary">登录</a-button>
    <a-dropdown v-if="authStore.isLogin">
        <a-avatar :size="42" style="cursor: pointer">
            <template #icon>
                <UserOutlined />
            </template>
        </a-avatar>
        <template #overlay>
            <a-menu>
                <a-menu-item>
                    <a href="javascript:;">个人设置</a>
                </a-menu-item>
                <a-menu-item @click="logout">
                    <a href="javascript:;">登出</a>
                </a-menu-item>
            </a-menu>
        </template>
    </a-dropdown>
    <LoginModal ref="loginModal" />
</template>

<script setup>
import { ref } from 'vue';
import { useAuthStore } from '@/stores/auth';
import LoginModal from '@/components/login/LoginModal.vue';
import request from '@/script/utils/request';

const authStore = useAuthStore();
const loginModal = ref(null);

const showLoginModal = () => {
    loginModal.value.showModal();
};

const logout = async () => {
    try {
        const res = await request.get('/user/auth/logout');
        authStore.logout()
    } catch (e) {

    }
}
</script>
